<template>
	<view class="container">

		<!-- 搜索框 -->
		<view class="search">
			<view style="width: 20%;">
				<u-search placeholder="请输入关键词" :showAction="true"  @custom="gameSearch"></u-search>
			</view>
		</view>

		<view class="content">
			<view class="nav">
				<my-card title="" sub-title="" extra="" padding="10px 0" :is-shadow="true">
					<view slot="actions" class="card-actions">
						<view class="card-actions-item">
							<u-cell-group>
								<u-cell icon="account" title="资源"></u-cell>
								<u-cell icon="account" title="我的"></u-cell>
								<u-cell icon="account" title="网站介绍"></u-cell>
								<u-cell icon="account" title="网站介绍"></u-cell>
								<u-cell icon="account" title="网站介绍"></u-cell>
								<u-cell icon="account" title="网站介绍"></u-cell>
								<u-cell icon="account" title="网站介绍"></u-cell>
								<u-cell icon="account" title="网站介绍"></u-cell>
								<u-cell icon="account" title="网站介绍"></u-cell>
							</u-cell-group>
						</view>
					</view>
				</my-card>
			</view>

			<view class="main">
				<!-- 工具栏 -->
				<view class="tool">
					<view>
						<u-checkbox-group v-model="checkboxValue" :size="14">
							<u-checkbox :customStyle="{marginBottom: '10px'}" label="显示隐藏" name="显示隐藏">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view>
						<u-switch v-model="value" @change="change" :size="20"></u-switch>
					</view>
					<view>
						<u-icon name="arrow-left-double" color="#2979ff" size="20" label="按时间"></u-icon>
					</view>
				</view>
				<!-- 卡片 -->
				<view class="list">
					<view class="card" v-for="item in list" :key="item.index">
						<my-card title="" sub-title="" extra="" padding="10px 0" :is-shadow="true" @click="toDetail(item.url)">

							<image :src="item.image_url"></image>

							<view slot="actions" class="card-actions">
								<view class="card-actions-name">
									{{item.name}}
								</view>
								<view class="card-actions-item">
									<view v-for="label in item.categories" :key="label.index">
										{{label}}
									</view>
								</view>
								<view class="card-actions-date">
									{{item.create_time}}
								</view>
							</view>
						</my-card>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="classification">
				<my-card title="" sub-title="" extra="" :is-shadow="true">
					<view slot="actions" class="card-actions">
						<view class="card-actions-item">
							<u-radio-group v-model="radiovalue" placement="column" @change="groupChange">
								<u-radio :customStyle="{marginBottom: '10px'}" v-for="(item, index) in radiolist"
									:key="index" :label="item.name" :name="item.name" @change="radioChange">
								</u-radio>
							</u-radio-group>
						</view>
						<view class="card-actions-item">
							<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
								<u-checkbox :customStyle="{marginBottom: '10px'}" v-for="(item, index) in checkboxList"
									:key="index" :label="item.name" :name="item.name">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</my-card>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: true,
				list: [],
				radiovalue: '游戏',
				radiolist: [{
						name: '游戏',
						disabled: false
					},
					{
						name: '软件',
						disabled: false
					},
					{
						name: '资料',
						disabled: false
					}
				],
				checkboxValue: [],
				// 基本案列数据
				checkboxList: [{
						name: '全选',
						disabled: false
					},
					{
						name: '局域网',
						disabled: false
					},
					{
						name: '单机',
						disabled: false
					},
					{
						name: '同屏联机',
						disabled: false
					},
					{
						name: '模拟器',
						disabled: false
					},
					{
						name: '网单',
						disabled: false
					},
					{
						name: '限定',
						disabled: false
					}
				],
			}
		},
		onLoad() {
			this.$u.api.index({
				page: 1
			}).then(res => {
				console.log(res)
			}).catch(e => {
				console.log(e)
			})
		},
		methods: {
			gameSearch(value){
				this.$u.api.gameSearch(value).then(res => {
					this.list = res.data
				}).catch(e => {
					console.log(e)
				})
			},
			toDetail(url){
				uni.navigateTo({
				  url: `/pages/detail/detail?url=${url}`
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 10rpx 40rpx;
	}

	.search {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 20rpx;
		height: 100rpx;
	}

	.content {
		background-color: #f8f9fa;
		display: flex;
		justify-content: space-between;
		min-height: calc(100vh - 100rpx);
	}

	.tool {
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.main {
		width: 50%;
		margin-left: 10%;
		margin-right: 10%;
	}

	.nav {
		width: 17.5%;
		display: flex;
		flex-direction: column;
	}

	.nav .card-actions {
		flex: 1;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
	}

	.card {
		width: 33.3%;
		cursor: pointer;
	}

	.card image {
		width: 100%;
		height: 117px;
	}

	.card .card-actions .card-actions-name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.card .card-actions .card-actions-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.card .card-actions .card-actions-item view {
		margin-right: 10rpx;
		font-size: 10px;
		color: #b0b0b0;
	}

	.card .card-actions .card-actions-date {
		font-size: 10px;
		margin-bottom: 20rpx;
		color: #b0b0b0;
	}
	
	::v-deep .card .uni-card{
		margin: 0 !important;
		margin-right: 15px !important;
		margin-bottom: 15px !important;
		border-radius: 10px;
	}

	::v-deep .card .uni-card:hover {
		transform: scale(1.2);
		transition: all 0.6s;
	}

	.classification {
		width: 17.5%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.classification .card-actions {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		flex: 1;
	}

	.classification .card-actions .card-actions-item {
		margin-bottom: 100rpx;
	}
</style>